課程目的:

這個章節，告訴我們該如何利用CSS變數（不是SASS）來調整圖片中黃框的pandding，邊框及JS字體顏色，以及模糊

本次功能實作重點：

• 了解CSS變數
• 使用JS去更改CSS變數的值，達到調整黃框padding以及顏色，模糊等效果

了解CSS變數

:root {
        /* 設定CSS的變數 */
        --base: #ffc600;
        --spacing: 10px;
        --blur: 0px;
      }

我們打開範例檔，到CSS區塊時可以發現作者設定的CSS變數，在:root這個大括號裡面

當F12去用選擇器:root時顯示的是html，而且我們得知了:root及html選擇器選擇的是同一個區域，但是這兩個有什麼差別呢？

於是上網尋找到了他們之間的差異:

• :root選擇器比html選擇器具有更高的權重。這是因為:root是偽類選擇器，html而是一個類型選擇器。這代表當我們同時設定了:root及html時，因為權重的關係:root會覆蓋html所設定的屬性

:root {
  background-color: red;
}

html {
  background-color: blue;
}

/* HTML document   background-color 顯示的是紅色  */

使用JS去更改CSS變數的值，達到調整黃框padding以及顏色，模糊等效果

 const inputs = document.querySelectorAll(".controls input");
  inputs.forEach(function (input) {
    input.addEventListener("change", changeHandler);
    input.addEventListener("mousemove", changeHandler); //加上移動的事件

1. 我們先將HTML中名為controls的div區塊中的input全部選擇起來
2. 監聽input中change跟mousemove的狀態，並執行一個函式為changeHandler

 /***此為HTML*/**
 <input
        id="spacing"
        type="range"
        name="spacing"
        min="10"
        max="200"
        value="10"
        data-sizing="px"
      />

      <label for="blur">Blur:</label>
      <input
        id="blur"
        type="range"
        name="blur"
        min="0"
        max="25"
        value="0"
        data-sizing="px"
      />

      <label for="base">Base Color</label>
      <input id="base" type="color" name="base" value="#ffc600" />

const inputs = document.querySelectorAll(".controls input");
  inputs.forEach(function (input) {
    input.addEventListener("change", changeHandler);
    input.addEventListener("mousemove", changeHandler); //加上移動的事件
    
function changeHandler() {
    let unit = this.dataset.sizing || " "; 

    document.documentElement.style.setProperty(
      "--" + this.name, //設定CSS的屬性名稱
      this.value + unit
    );
  }

unit

這個變數的賦值運用了短路求值計算，當觸發函式的時候我們的input中如果有自定義屬性dataset.sizing則取它的值，如果沒有則為空值

setProperty

• 用途: 用於動態設置或修改某個元素的內聯樣式或 CSS 變數。
• 作用範圍: 這個方法直接改變指定元素的 CSS 屬性值。可以用來設置標準的 CSS 屬性（如 color、background-color 等），也可以用來設置自定義的 CSS 變數（如 --base）。

我們可以利用此屬性，在監聽到input出現change及mousemove時更改我們變數的數值

用法像是這樣:

document.documentElement.style.setProperty( property, value);

document.documentElement.style.setProperty( 
 "--" + this.name, //設定CSS的屬性名稱
 this.value + unit 
    );

最後重點整理 ：

• CSS中的:root選擇器雖然與HTML選擇的區塊一致，但前者的權重勝過於後者
• setProperty( property, value)用於動態設置或修改某個元素的內聯樣式或 CSS 變數